<template>
  <div class="footer">
    <div class = "decoration">
      <img src="/img/yun.png" alt="" >
    </div>
    <div class="description">
      <ul>
        <li style="font-size: 22px; font-weight: 600; letter-spacing: 5px; margin-bottom: 20px">
          宠物寄领养平台
        </li>
        <li>
          开发者：xiepeiquan
        </li>
        <li>
          注意事项：此网站仅为个人开发的练习网站，请勿在网站中输入敏感信息!
        </li>
      </ul>
    </div>
    <div class="my-wechat">
      <div class="wechat">
        这个小破站开发者的微信
      <img src="/img/myWechat.jpg" alt="" width="160px" style="margin-top: 5px">
      </div>
      
      <img class="cube" src="/img/cubeafter.png" alt="" width="120px">
    </div>
    
  </div>
</template>

<script>
export default {
    name: 'Footer'
}
</script>

<style scoped>
.footer {
    width: 100vw;
    height: 300px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    overflow: hidden;
    background-color: dimgrey;
}

.decoration {
  width: 200px;
  height: 100%;
}

.decoration img {
  margin-top: 180px;
  opacity: 0.5;
  width: 200px;
}


.description {
  width: 900px;
  height: 100%;
  color: #d0d0d0;
}

.description ul {
  width: 100%;
  margin-top: 140px;
  /* margin-left: 200px; */
}

.description ul li {
  text-align: center;
  width: 100%;
  margin: 20px 0;
}

.my-wechat {
  width: 300px;
  height: 100%;
  position: relative;
  color: #ffffff;
}

.my-wechat .wechat {
  position: absolute;
  z-index: 2;
  top: 30px;
}

.my-wechat .wechat img {
  box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.79) ;
}

.my-wechat .cube {
  position: absolute;
  z-index: 1;
  top: 210px;
  left: 130px;
  /* filter: blur(1px); */
}


</style>